<template>
    <div>
    <!-- 买家查询 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" >
        <el-form-item label="买家信息：">
            <el-button type="primary"  icon="el-icon-search" @click="pushShow()" size="mini">买家查询</el-button>
        </el-form-item>
    </el-form>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="买家账号：" >
            <el-input v-model="formInline.usernick" placeholder="请点击查询" disabled></el-input>
        </el-form-item>
        <el-form-item label="买家公司名称：">
            <el-input v-model="formInline.enterprisename" placeholder="请点击查询" disabled class="inputcompany"></el-input>
        </el-form-item>
        <el-form-item label="买家联系方式：" >
            <el-input v-model="formInline.usermobile" placeholder="请点击查询" disabled></el-input>
        </el-form-item>
    </el-form>
    <!-- 配单商品 -->
    <el-form :inline="true"  class="demo-form-inline" >
        <el-form-item label="配单商品列表：">
            <el-button type="primary"  icon="el-icon-search" @click="addProduct" size="mini">添加商品</el-button>
            <el-button type="danger"   @click="delGroup()" size="mini">删除商品</el-button>
        </el-form-item>
    </el-form>
      <!-- table表单 -->
    <el-table ref="multipleTable" v-loading="loading" :data="list" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" fixed/>
        <el-table-column label="商品图片" prop="commodityicon" align="center" width="120" >
            <template slot-scope="scope">
            <el-popover v-if="scope.row.commodityicon" placement="right" trigger="hover">
                <img :src="scope.row.commodityicon" style="width:400px;border-radius:3px;">
                <img slot="reference" :src="scope.row.commodityicon" style="max-height: 80px;max-width: 50px;border-radius:5px;">
            </el-popover>
            <span v-else>-</span>
            </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="commodityname" width="150" align="center"/>
        <el-table-column label="品牌名称" prop="companyName" width="150" align="center"/>
        <el-table-column label="商品规格" prop="inventory" width="120" align="center"/>
        <el-table-column label="成本价" prop="costprice" width="120" align="center"/>
        <el-table-column label="代理价" prop="primaryagentprice" width="120" align="center"/>
        <el-table-column label="分销价" prop="commodityprice" width="120" align="center"/>
        <el-table-column label="零售价" prop="commodityoldprice" width="120" align="center"/> 
        <el-table-column label="库存" prop="buyfromnum" width="120" align="center"/> 
        <el-table-column label="采购数量"  width="300" align="center">
          <template slot-scope="scope">
            <el-input-number v-model="num" @change="handleChange(scope.row)" :min="0" :max="buyfromnum" label="描述文字"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="金额:(元)" prop="usernick" width="120" align="center"> 
          <template slot-scope="scope">
            <el-input v-model="totalNumber" @change="handleChange(scope.row)" disabled></el-input>
          </template>
        </el-table-column>
    </el-table>
    <!-- 配单商品 -->
    <el-form :inline="true"  class="demo-form-inline" label-width="150px">
        <el-form-item label="商品条目：">
            <span>{{num1}}条</span>
        </el-form-item>
        <el-form-item label="总金额：">
            <span>{{totalNumber}}元</span>
        </el-form-item>
        <el-form-item label="生成订单：">
            <el-button type="primary"  @click="onSubmit" size="mini">生成订单</el-button>
        </el-form-item>
    </el-form>
    </div>
</template>
<script>
  import {eventBus}from '../../utils/eventBus'
  export default {
    data() {
      return {
        formInline: {},
        list:[],
        num:0,
        num1:1,
        loading:false,
        buyfromnum:"",
        totalNumber:0,//总价格
        multipleTableSelection:[],
      }
    },
    methods: {
      //买家查询
      pushShow() {
       this.$router.push( {path:`/accountCapital/buyUser`})  
       
      },
      //添加商品
      addProduct(){
        this.$router.push( { 
                path: "productionSearch",
                name: "平台商品查询页"}) 
      },
    
      handleChange(val){
        // console.log(val)
        this.totalNumber = val.primaryagentprice*this.num 
        console.log(this.totalNumber)
      },
      onSubmit(){

      },
      handleSelectionChange(val){
         console.log(val)
         this.multipleTableSelection =val || []
      },
      //删除全选

      delGroup() {
        
          var ids = this.multipleTableSelection.map(item => item.commodityid).join(); //获取所有选中行的id组成的字符串，以逗号分隔
          if (ids == "") {
              this.$message({
                  message: "请先选择",
                  type: "warning"
              });
              return;
          }
          this.handleDel(ids);
      },

      /*选中事件*/
      handleDel(ids) {
      console.info()
      if (ids) {
          this.$confirm("确认要删除吗?", "提示", {
              type: "warning"
          })
          .then(() => {
              this.loading = true;
              var params = new URLSearchParams();
              params.append("ids", ids);
              // delBusCommodity(params)
              //     .then(response => {
              //         this.loading = false;
              //         if (response.code) {
              //             this.$message.error(response.message);
              //             return false;
              //         }
              //         this.$message.success("删除成功");
              //         // 刷新数据
              //         //this.list.splice(index, 1);
              //         this.getList();
              //     })
              //     .catch(() => {
              //         this.loading = false;
              //     });
          })
          .catch(() => {
              this.$message.warning("已取消");
          });
          }
      },
    },
    created(){
    //  var buyUser =new Object()
    //   buyUser.usermobile = this.$route.query.usermobile
    //   buyUser.enterprisename = this.$route.query.enterprisename
    //   buyUser.usernick =this.$route.query.usernick
    //   买家信息页面数据
      let buyUser = JSON.parse(localStorage.getItem("infoList")) ||{}
      this.formInline = buyUser
      console.log(this.formInline)
    //   商品页面数据初始化
      // var product = new Object()
      //   product.commodityicon=this.$route.params.commodityicon,//商品图片
      //   product.commodityname=this.$route.params.commodityname,//商品名称
      //   product.companyName=this.$route.params.companyName,//品牌名称
      //   product.inventory=this.$route.params.inventory,//商品规格   
      //   product.costprice=this.$route.params.costprice,//成本价
      //   product.primaryagentprice=this.$route.params.primaryagentprice,//代理价
      //   product.secondaryagentprice=this.$route.params.secondaryagentprice,//经销价
      //   product.commodityprice=this.$route.params.commodityprice,//分销价  
      //   product.commodityoldprice=this.$route.params.commodityoldprice,//零售价 
      //   product.buyfromnum=this.$route.params.buyfromnum,//库存   
      //   product.commodityid=this.$route.params.commodityid //商品id
      let listArr =JSON.parse(localStorage.getItem("listArr")) || []  //存取一条数据
      console.log(listArr)
      this.list = listArr 
      if(listArr.length != 0){
        console.log(1)
        this.buyfromnum = listArr[0].buyfromnum 
      }
           
      // let newArr =[]
      // if( JSON.stringify(product) !='{}' ){
      //   //新建一个数组接受每次传来的数据
      //   newArr.push(product)
      //   console.log(newArr)
      //   if(newArr!="[{}]"){
      //     localStorage.setItem("newArr",JSON.stringify (newArr))
      //   }
        
      // }
    
    },
    // destroyed(){
    //   localStorage.removeItem("infoList")
    // }
   
  }

</script>
<style scoped>
 .inputcompany{
   width: 300px;
 }
</style>
